<template>
	<div>
	  <div class="shopcart">
	    <div class="content">
	      <div class="content-left" @click="toggleShow">
	        <div class="logo-wrapper">
	          <div class="logo" :class="{highlight: total}">
	            <i class="iconfont icon-gouwuche" :class="{highlight: total}"></i>
	          </div>
	          <div class="num" v-show="total">{{total}}</div>
	        </div>
	        <div class="price" :class="{highlight: total}">￥{{totalPrice}}</div>
	        <div class="desc">另需配送费￥{{shopInfo.deliveryPrice}}元</div>
	      </div>
	      <div class="content-right">
	        <div class="pay not-enough" :class="{enough: totalPrice>=shopInfo.minPrice}">
						<!-- 还差￥10元起送 -->
	          {{distributionPriceStatus}}
	        </div>
	      </div>
	    </div>
	    <transition name="move">
				<div class="shopcart-list" v-show="listShow" >
				  <div class="list-header">
				    <h1 class="title">购物车</h1>
				    <span class="empty" @click="empty">清空</span>
				  </div>
				  <div class="list-content" ref="listRef">
				    <ul>
				      <li class="food" v-for="item,index in cartFood" :key="index">
				        <span class="name">{{item.name}}</span>
				        <div class="price"><span>￥{{item.price}}</span></div>
				        <div class="cartcontrol-wrapper">
				         <CartControl :food="item" :cartFood="cartFood"></CartControl>
				        </div>
				      </li>
				    </ul>
				  </div>
				</div>
			</transition>
	  </div>
	  <div class="list-mask" v-show="listShow" @click="toggleShow"></div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import CartControl from '../CartControl/CartControl.vue'
	export default {
		data() {
			return {
				// 商家信息数据对象
				shopInfo: {},
				
				isShow: false
			}
		},
		created() {
			// 事件回调获取商家信息
			this._getShopInfo()
		},
		mounted() {
			
		},
		methods: {
			// 获取商家信息
			async _getShopInfo() {
				// 发起请求获取商家信息
				const { data : res } = await this.$http.get('/shop_info')
				
				// 获取数据
				this.shopInfo = res.data
			},
			// 显示隐藏购物车
			toggleShow() {
				if(this.total>0) {
					this.isShow = !this.isShow
				}
			},
			// 清空购物车
			empty() {
				
				// 把购物车里面的商品的count重置为0或者干掉
				this.cartFood.forEach(item => {
					item.count = 0
				})
				// 清空购物车
				// 方式一
				this.cartFood.splice(0, this.cartFood.length);
				// 方式二
				// this.cartFood = []
			},
		},
		computed: {
			// 计算商品总数
			total() {
				// 定义一个变量容器
				let total = 0
				// 循环购物车数据
				this.cartFood.forEach(item => {
					// 累加数量
					total += item.count
				})
				
				// 返回出去
				return total
			},
			// 计算商品总价格
			totalPrice() {
				// 定义一个变量容器
				let totalPrice = 0
				// 循环购物车数据
				this.cartFood.forEach(item => {
					// 累加数量
					totalPrice += item.price * item.count
				})
				// 返回出去
				return totalPrice
			},
			// 配送价格状态
			distributionPriceStatus() {
				
				let totalPrice = this.totalPrice
				
				if(!totalPrice){
					return `需${this.shopInfo.minPrice}元起送`
				}else if(totalPrice<this.shopInfo.minPrice) {
					return `还差${this.shopInfo.minPrice - totalPrice }元配送`
				}else {
					return '去结算'
				}
				
				
			},
			listShow() {
				// 如果数量为0不显示
				if(this.total === 0) {
					return false
				}
				
				if(this.isShow) {
					this.$nextTick(() => {
						// 实现BScroll这个实例对象是一个单例
						if(!this.scroll) {
							this.scroll = new BScroll('.list-content', {
								click: true
							})
						}else {
							//让滚动条刷新一下：重新统计内容高度
							this.scroll.refresh()  
						}
					})
				}
					
				
				return this.isShow
			}
		},
		props: {
			cartFood: {
				type: Array
			}
		},
		components: {
			CartControl
		},
		watch: {
			
		}
	}
</script>

<style lang="less" scoped>
	.shopcart{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: 100%;
		height: 48px;
		.content{
			display: flex;
			background: #141d27;
			font-size: 0;
			color: rgba(255, 255, 255, 0.4);
			.content-left{
				flex: 1;
				.logo-wrapper{
					display: inline-block;
					vertical-align: top;
					position: relative;
					top: -10px;
					margin: 0 12px;
					padding: 6px;
					width: 56px;
					height: 56px;
					box-sizing: border-box;
					border-radius: 50%;
					background: #141d27;
					.logo{
						width: 100%;
						height: 100%;
						border-radius: 50%;
						text-align: center;
						background: #2b343c;
						&.highlight{
							background: #03A774;
						}
						.icon-gouwuche{
							line-height: 44px;
							font-size: 24px;
							color: #80858a;
							&.highlight{
								color: #fff;
							}
						}
					}
					.num{
						position: absolute;
						top: 0;
						right: 0;
						width: 24px;
						height: 16px;
						line-height: 16px;
						text-align: center;
						border-radius: 16px;
						font-size: 9px;
						font-weight: 700;
						color: #ffffff;
						background: rgb(240, 20, 20);
						box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
					}
				}
				.price{
					display: inline-block;
					vertical-align: top;
					margin-top: 12px;
					line-height: 24px;
					padding-right: 12px;
					box-sizing: border-box;
					border-right: 1px solid rgba(255, 255, 255, 0.1);
					font-size: 16px;
					font-weight: 700;
					&.highlight{
						color: #fff;
					}
				}
				.desc{
					display: inline-block;
					vertical-align: top;
					margin: 12px 0 0 12px;
					line-height: 24px;
					font-size: 10px;
				}
			}
			.content-right{
				flex: 0 0 105px;
				width: 105px;
				.pay{
					height: 48px;
					line-height: 48px;
					text-align: center;
					font-size: 12px;
					font-weight: 700;
					&.not-enough{
						background: #2b333b;
					}
					&.enough{
						background: #00b43c;
						color: #fff;
					}
				}
			}
		}
		.shopcart-list{
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			width: 100%;
			transform: translateY(-100%);
			&.move-enter-active, &.move-leave-active{
				transition: transform .5s ease-in-out;
			}
			&.move-enter, &.move-leave-to{
				transform: translateY(0);
			}
			.list-header{
				height: 40px;
				line-height: 40px;
				padding: 0 18px;
				background: #f3f5f7;
				border-bottom: 1px solid rgba(7, 17, 27, 0.1);
				.title{
					float: left;
					font-size: 14px;
					color: rgb(7, 17, 27);
				}
				.empty{
					float: right;
					font-size: 12px;
					color: rgb(0, 160, 220);
				}
			}
			.list-content{
				padding-left: 18px;
				max-height: 217px;
				overflow: hidden;
				background: #fff;
				.food{
					position: relative;
					padding: 12px 0;
					box-sizing: border-box;
					border-bottom 1px solid rgba(7, 17, 27, 0.1)
					.name{
						line-height: 24px;
						font-size: 14px;
						color: rgb(7, 17, 27);
					}
					.price{
						position: absolute;
						right: 90px;
						bottom: 12px;
						line-height: 24px;
						font-size: 14px;
						font-weight: 700;
						color: rgb(240, 20, 20);
					}
					.cartcontrol-wrapper{
						position: absolute;
						right: 0;
						bottom: 6px;
						width: 100%;
					}
				}
			}
		}
	}
	.list-mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 40;
		backdrop-filter: blur(10px);
		opacity: 1;
		background: rgba(7, 17, 27, 0.6);
		&.fade-enter-active, &.fade-leave-active{
			transition: all 0.5s;
		}
		&.fade-enter, &.fade-leave-to{
			opacity: 0;
		}
	}
</style>
